<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>英雄列表</title>
  <!-- 导入jquery -->
  <script src="./libs/jquery-1.12.4.min.js"></script>
  <!-- 导入bootstrap -->
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
  <!-- 导入art-template -->
  <script src="./libs/template-web.js"></script>
</head>

<body>
  <!-- bootstrap的容器  带版心的-->
  <div class="container">
    <!-- 导航 -->
    <nav class="navbar navbar-default">
      <div class=".container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="#">欢迎进入CQ后台管理</a>
        </div>
        <!-- 用户登录信息 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#" id="username">张三</a></li>
            <li><button class="btn btn-danger btn-exit" id="logout"
                onclick="location.href='http://127.0.0.1:3000/logout'">退出</button></li>
            <li><button class="btn btn-success" id="login" onclick="location.href='./login.html'">请登录</button></li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- 底部的内容 -->
    <div class="row">
      <!-- 栅格布局 -->
      <div class=".col-md-9">
        <div class="panel panel-default">
          <!-- 标题 -->
          <div class="panel-heading">
            <h3 class="panel-title">
              <!-- 面包屑导航 -->
              <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li class="active">英雄列表</li>
              </ol>
            </h3>
          </div>
          <!-- 标题 -->
          <div class="panel-heading">
            <!-- 表单 -->
            <form class="form-inline">
              <div class="form-group">
                <label class="sr-only" for="search">Amount (in dollars)</label>
                <div class="input-group">
                  <div class="input-group-addon">英雄姓名</div>
                  <input type="text" class="form-control" id="search" placeholder="这是我自己请输入查询内容" />
                </div>
              </div>
              <button type="button" class="btn btn-success btn-search" id="searchBtn">查找</button>
              <button type="button" class="btn btn-warning" onclick="location.href='./insert.html'">新增</button>
            </form>
          </div>
          <!-- 内容 -->
          <div class="panel-body" id="content">
            <table class="table table-bordered">
              <!-- 头部 -->
              <thead>
                <tr>
                  <th>姓名</th>
                  <th>技能</th>
                  <th>头像</th>
                  <th>操作</th>
                </tr>
              </thead>
              <!-- 表格body -->
              <tbody id="heroListBody">
                <td> 小可爱 </td>
                <td> 渣女大波浪 </td>
                <td><img src="./images/ml03.png" width="72px" height="72px"></td>
                <td class="manager">
                  <button class="btn btn-success" onclick="location.href='./update.html'">编辑🐷</button>
                  <button class="btn btn-danger">删除👍</button>
                </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 英雄列表模板 -->
  <script id="heroListTemp" type="text/html">
    {{each data v}}
    <tr>
      <td> {{v.heroName}} </td>
      <td> {{v.heroSkill}} </td>
      <td><img src="{{v.heroIcon}}" width="72px" height="72px"></td>
      <td class="manager">
        <button class="btn btn-success" onclick="location.href='./update.html?id={{v.id}}'">编辑🐷</button>
        <button data-id='{{v.id}}' class="btn btn-danger btn-delete">删除👍</button>
      </td>
    </tr>
    {{/each}}
  </script>
  <!-- 必须在这里引入我们的懒加载插件 -->
  <script src="./libs/EasyLazyload.min.js"></script>
  <script>
    lazyLoadInit({
      showTime: 1100,
      onLoadBackEnd: function (i, e) {
        console.log("onLoadBackEnd:" + i);
      },
      onLoadBackStart: function (i, e) {
        console.log("onLoadBackStart:" + i);
      }
    });
  </script>
  <script>

    $(function () {
      //获取所有英雄， 并且渲染让浏览器
      function getHero() {
        $.ajax({
          type: 'get',
          url: "http://127.0.0.1:8089/hero/all",
          success: function (backData) {
            console.log(backData);
            let str = template("heroListTemp", backData)

            $("#heroListBody").html(str)
          }
        })
      }
      getHero()
      //给新增英雄按钮添加点击事件，跳转到新增页面
      $(".btn-warning").on('click', function (e) {
        e.preventDefault()
        window.location.href = './insert.html'
      })

      //使用事件委托给删除按钮添加点击删除事件
      $("#heroListBody").on("click", ".btn-delete", function () {
        if (confirm('真的要删除了我吗')) {
          let id = $(this).attr("data-id")
          $.ajax({
            type: 'get',
            url: "http://127.0.0.1:8089/hero/delete",
            data: { id },
            success: function (backData) {
              if (backData.code == 300) {
                alert(backData.msg)
                //重新发送ajax请求获取数据，在浏览器中渲染数据
                getHero()

              }
            }

          })
        }
      })

    })
    //入口函数
    // $(function () {
    //   //一:一进到页面就发送ajax请求,获取所有的英雄,通过模板引擎渲染. 
    //   function getData() {
    //     $.ajax({
    //       type: 'get',
    //       url: 'http://127.0.0.1:8089/hero/all',
    //       success: function (backData) {
    //         console.log(backData);
    //         if (backData.code == 200 && backData.data.length > 0) {
    //           let res = template('heroListTemp', backData);
    //           $('tbody').html(res);
    //         } else if (backData.code == 200 && backData.data.length == 0) {
    //           $('tbody').html('没有数据');
    //         }
    //       }
    //     });
    //   }
    //   getData();

    //   //二:点击搜索按钮完成英雄的搜索. 
    //   $('#searchBtn').on('click', function (e) {
    //     e.preventDefault();
    //     let heroName = $('#search').val().trim();
    //     if (heroName == '') {
    //       alert('搜索内容不能为空!');
    //       return;
    //     }
    //     //发送ajax请求
    //     $.ajax({
    //       type: 'get',
    //       url: 'http://127.0.0.1:8089/hero/all',
    //       data: {
    //         heroName
    //       },
    //       success: function (backData) {
    //         console.log(backData);
    //         if (backData.code == 200 && backData.data.length > 0) {
    //           let res = template('heroListTemp', backData);
    //           $('tbody').html(res);
    //         } else if (backData.code == 200 && backData.data.length == 0) {
    //           $('tbody').html('没有数据');
    //         }
    //       }
    //     });
    //   })

    //   //三:删除英雄
    //   //委托给删除按钮们设置点击事件. 
    //   $('tbody').on('click', '.btn-delete', function () {
    //     if (confirm("你确定要删除吗?")) {
    //       let id = $(this).attr('data-id');
    //       //发送ajax请求完成删除. 
    //       $.ajax({
    //         type: 'get',
    //         url: 'http://127.0.0.1:8089/hero/delete',
    //         data: {
    //           id
    //         },
    //         success: function (backData) {
    //           if (backData.code == 204) {
    //             alert('删除成功!');
    //             getData();
    //           }
    //         }
    //       });
    //     }
    //   })

    // });
  </script>
</body>

</html>